<template>
    <div>
        <!-- 上 -->
        <div>
            <img :src=info.avatar  class="avactar">
            <p style="text-align: center;">{{info.name}}</p>
        </div>
        <!-- 中 -->
         <div style="display: flex;; flex-direction: column;justify-content: space-around;align-items: center;text-align: center;">

            <p>账号：<input :value=info.account></p>
            <p>密码：<input type="password" :value=info.account></p>
            <p>简介：<input :value=info.bio></input></p>
         </div>
         <!-- 下 -->
          <div>

          </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const info=ref({
    name:"用户1",
    avatar:"../../../public/avatar.jpeg",
    account:"1122334",
    password:"123123",
    bio:"这个用户很懒，什么都没写",
})

</script>

<style  scoped>
.avactar{
    margin-right: 10px;
    width: 200px;
    border-radius: 50%;
}
</style>